<template>
    <div style="height: 100%;width: 100%">
        <template v-if="!showDetail">
            <div class="header">
                <el-switch
                        style="display: block"
                        v-model="tiled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="平铺"
                        inactive-text="列表">
                </el-switch>
            </div>
            <div class="main">
                <div class="table">
                    <vue-scroll>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                            <el-table-column
                                    type="index"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="课程名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="classtime"
                                    label="课时"
                                    width="80">
                            </el-table-column>

                            <el-table-column
                                    prop="start"
                                    width="100"
                                    label="开始时间">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    width="100"
                                    label="结束时间">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    width="220"
                                    label="缩略图">
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.img">暂无</span>
                                    <el-image style="width: 200px;" :src="scope.row.img" fit="contain"
                                              :preview-src-list="[scope.row.img]"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="desc"
                                    width="300"
                                    label="描述">
                            </el-table-column>
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-delete" @click="showLessonItem(scope.row)">
                                        查看课程
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </vue-scroll>
                </div>
                <div class="main-footer">
                    <el-pagination
                            :current-page="page.page"
                            :page-sizes="[20, 50, 100]"
                            :page-size="page.rows"
                            layout="total,sizes,prev,pager,next,jumper"
                            background
                            :total="page.total"
                            @size-change="handleSizeChange"
                            @current-change="handlePageNumChange"
                    />
                </div>
            </div>
        </template>
        <template v-if="showDetail">

            <div class="main2">

                <vue-scroll>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>{{lesson.name}}</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="showDetail=false;">返回</el-button>
                        </div>
                        <div class="img">
                            <el-image :src="lesson.img"/>
                        </div>
                        <div class="baseInfo">
                            <div v-for="(o,index) in lesson" :key="o" class="text item">
                                {{ index=="img" ? '' : '列表内容 ' + index + o }}
                            </div>
                        </div>

                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>课程详情</span>
                        </div>
                        <div class="lessondetail">
                            <el-timeline>
                                <el-timeline-item v-for="(item,index) in lesson.lessonitems" :key="index" :timestamp="''" placement="top" size="large">
                                    <el-card>
                                        <h4>{{(index+1) + "、 " + item.name}}</h4>
                                        <p style="text-indent: 2em">{{item.description}}</p>
                                        <lessonmedia :medias="item.lessonmedias"/>
                                    </el-card>
                                </el-timeline-item>

                            </el-timeline>
                        </div>

                    </el-card>
                </vue-scroll>
            </div>
        </template>
    </div>
</template>

<script>
    import lessonApi from "../../api/lessonApi";
    import commonMethod from "../../util/commomMethods";
    import Lessonmedia from "../../components/Lessonmedia";

    export default {
        name: "listinfo",
        components: {Lessonmedia},
        data() {
            return {
                list: false,
                tiled: false,
                showDetail: false,
                tableData: [],
                page: {page: 1, rows: 20, total: 0},
                lesson: {},
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            showLessonItem(lesson) {
                this.showDetail = true;
                this.lesson = lesson;
            },
            init() {
                this.loadData();
            },
            loadData() {
                const {page, rows} = this.page
                lessonApi.getList("", "", page, rows).then(res => {
                    this.tableData = res.data.rows;
                    this.page.total = res.data.total
                }).catch(error => this.$message.error(error));
            },

            handleSizeChange(val) {
                this.page.rows = val
                this.page.page = 1
                this.loadData()
            },
            handlePageNumChange(val) {
                this.page.page = val
                this.loadData()
            },
        }
    }
</script>

<style>
    .header {
        height: 60px;
        width: 100%;
    }

    .main {
        height: calc(100% - 180px);
    }
    .main2 {
        height: calc(100% - 100px);
    }

    .table {
        width: calc(100% - 40px);
        height: calc(100% - 60px);
    }

    .main-footer {
        height: 40px;
        width: 100%;
    }

    .baseInfo {
        margin-left: 20px;
        width: calc(100% - 700px);
        height: 300px;
        overflow: hidden;
        display: inline-block;

    }

    .item {
        line-height: 30px;
    }

    .img {
        width: 500px;
        height: 300px;
        overflow: hidden;
        display: inline-block;
    }
    .lessondetail{
        width: 100%;
    }
</style>